<template>
	<div class="b-cont">
		<div>
			<!-- 关联案件 -->
			<sections
				class="b-cells" 
				title="面谈已签案件" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				crm-type="lawcase"
				type="save"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="list.list1"
						stripe
						:cell-style="cellStyle"
						border
						:header-cell-style="{'background-color':'#f6faff'}"
						@row-click="handleRowClick"
						style="width: 100%">
						<el-table-column label="案件类型" width="105">
							<template
								slot-scope="scope">
								<el-tag
									effect="plain" 
									size="mini"
									style="margin-right: 5px;"
									type="danger">{{scope.row.type}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="案件名称" width="255"></el-table-column>
						<el-table-column prop="anyou" label="案由" width="105"></el-table-column>
						<el-table-column prop="status" label="案件状态" width="105"></el-table-column>
						<el-table-column prop="jieduan" label="委托阶段" width="125"></el-table-column>
						<el-table-column prop="create_time" label="创建时间"></el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
			<!-- 关联顾问-->
			<sections
				class="b-cells" 
				title="面谈已签顾问" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				crm-type="contract"
				type="save_contract"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="list.list2"
						stripe
						:cell-style="cellStyle1"
						border
						:header-cell-style="{'background-color':'#f6faff'}"
						@row-click="handleRowClick"
						style="width: 100%">
						<el-table-column prop="customer" label="关联客户" width="105"></el-table-column>
						<el-table-column prop="contract_number" label="合同编号" width="155"></el-table-column>
						<el-table-column prop="sign_time" label="签约时间" width="105"></el-table-column>
						<el-table-column prop="price" label="合同金额" width="105"></el-table-column>
						<el-table-column prop="end_time" label="到期时间" width="125"></el-table-column>
						<el-table-column prop="create_time" label="创建时间"></el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
			
			<!-- 面谈未收费-->
			<sections
				class="b-cells" 
				title="面谈未收费" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				type="save_nocharge"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="list.list3"
						stripe
						:cell-style="cellStyle"
						border
						:header-cell-style="{'background-color':'#f6faff'}"
						@row-click="handleRowClick"
						style="width: 100%">
						<el-table-column label="谈单人" width="105">
							<template
								slot-scope="scope">
								<template v-for="(i,k) in scope.row.user_re_user_id">
									{{i.username}}{{k > 0 ? ',' :''}}
								</template>
							</template>
						</el-table-column>
						<el-table-column prop="re_time" label="谈单时间" width="100"></el-table-column>
						<el-table-column prop="re_detail" label="面谈情况" width="305"></el-table-column>
						<el-table-column prop="create_user_id[0].username" label="创建人" width="105"></el-table-column>
						<el-table-column prop="create_time" label="创建时间" width="150"></el-table-column>
						<el-table-column
							align="center"
							label="操作">
								<template slot-scope="scope">
									<a
										v-if="allAuth.customer.update_nocharge"
										href="javascript:void(0)" 
										@click="handleAction({'type':'update_nocharge','data':scope.row})">
										修改
									</a>
									<a 
										v-if="allAuth.customer.del_nocharge"
										href="javascript:void(0)" 
										@click="handleAction({'type':'del_nocharge','data':scope.row})">
										删除
									</a>
								</template>
						</el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
		</div>
		
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
		
		<c-r-m-create-view
			v-if="isCreate"
			:crm-type="createCRMType"
			:action="createActionInfo"
			@save-success="createSaveSuccess"
			@hiden-view="hideView"/>
		
		<!-- 相关详情页面 -->
		<c-r-m-full-screen-detail
			:visible.sync="showFullDetail"
			:id="rowID"
			:crm-type="rowType"/>
		
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Sections from '../../customer/Sections'
	import DialogForm from '@/components/FromData/dialogForm'
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	import CRMCreateView from '@/components/table/CRMCreateView'
	import {
		crmCustomerTolawcase,
		crmCustomerNochargeSave,
		crmCustomerNochargeDel,
		crmCustomerNochargeUpdate
	} from '@/api/customer/customer'
	import { crmLawcaseSave } from '@/api/lawcase/lawcase'
	import { crmContractSave } from '@/api/contract/contract'
	export default {
		components: {
			Sections,
			CRMFullScreenDetail: () => import('@/components/table/CRMFullScreenDetail.vue'),
			CrmRelativeCell,
			CRMCreateView,
			DialogForm
		},
		data() {
			return {
				list:[],
				
				rowID: '', // 行信息
				showFullDetail: false,
				rowType:'',
				
				// 添加
				isCreate: false, 
				createActionInfo: { type: 'save' },
				createCRMType:'',
				
				// dialog弹窗
				dialogForm:false,
				title:"",
				action:{ type: '',relevant:'' },
				formData:{},
			}
		},
		props: {
			/** 模块ID */
			id: [String, Number],
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			}
		},
		watch: {
			id: function(val) {
				this.getInfo()
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		mounted() {
			this.$bus.$on("refresh-detail",()=>{
			   this.getInfo()
			})
			this.getInfo()
		},
		methods: {
			// 获取基础信息
			getInfo() {
				crmCustomerTolawcase({
						customer_id: this.id
					})
					.then(res => {
						if(res.data){
							this.list = JSON.parse(JSON.stringify(res.data))
						}
					})
					.catch(() => {})
			},
			
			handleAction(item){
				switch (item.type){
					case 'save_nocharge':
						this.title = "新增信息"
						this.action = { type: 'save',relevant:'nocharge',actiontype:13  }
						this.dialogForm = true
						break;
						
					case 'update_nocharge':
						this.title = "修改信息"
						this.dialogForm = true
						this.action = { type: 'update',relevant:'nocharge',actiontype:13}
						let items = JSON.parse(JSON.stringify(item.data))
						
						this.formData = items
						break;
						
					case 'del_nocharge':
						this.delInfo({"type":item.type,"data":item.data})
						break;
						
					case 'save_contract':
						this.createCRMType = 'contract'
						this.createActionInfo = {
							type: 'save',
							relevant:"contract",
							id:this.id,
							actiontype:10
						}
						this.isCreate = !this.isCreate
						break;
						
					default:
						let actionTypes
						if(item.type == "zixun") actionTypes = 13
						if(item.type == "fuwu") actionTypes = 14
						if(item.type == "susong") actionTypes = 15
						if(item.type == "xingshi") actionTypes = 16
						this.createCRMType = 'lawcase'
						this.createActionInfo = {
							type: 'save',
							relevant:item.type,
							id:this.id,
							actiontype:actionTypes 
						}
						this.isCreate = !this.isCreate
						break;
				}
				
			},
			
			/** 列表操作 */
			handleRowClick(row, column, event) {
				if (column.property === 'name') {
					this.$router.push({
						path: "/lawcase/read/" + row.id
					})
				}else if (column.property === 'customer') {
					this.$router.push({
						path: "/contract/read/" + row.id
					})
				} 
			},
			
			/** 通过回调控制style */
			cellStyle({ row, column, rowIndex, columnIndex }) {
				if (column.property === 'name') {
					return { color: '#3E84E9', cursor: 'pointer' }
				} else {
					return ''
				}
			},
			cellStyle1({ row, column, rowIndex, columnIndex }) {
				if (column.property === 'customer') {
					return { color: '#3E84E9', cursor: 'pointer' }
				} else {
					return ''
				}
			},
			
			// 创建数据页面 保存成功
			createSaveSuccess(data){
				let request
				
				if(this.createCRMType == 'lawcase'){
					request = crmLawcaseSave
				}else if(this.createCRMType == 'contract'){
					request = crmContractSave
				}
				request(data).then((res) => {
					this.$message.success(res.data)
					this.isCreate = false
					this.getInfo()
				}).catch(() => {})
			},
			// 关闭新建弹窗
			hideView() {
				this.isCreate = false
				this.$emit('hide-view')
			},
			
			
			delInfo(item){
				let request
				if(item.type == "del_nocharge"){
					request = crmCustomerNochargeDel
				}
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					request({
						id: item.data.id
					})
					.then(res => {
						this.$message.success(res.data)
						this.getInfo()
					})
					.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
			},
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			saveDialog(item){
				let data = item.data
				data["customer_id"] = this.id
				let request
				if(item.type == "update_nocharge"){
					request = crmCustomerNochargeUpdate
				}else if(item.type == "save_nocharge"){
					request = crmCustomerNochargeSave
				}
				
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.getInfo()
					})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.b-cont {
		position: relative;
		padding: 0 50px 20px 20px;
	}

	.b-cells {
		margin-top: 25px;
	}

	.b-cell {
		padding: 0 10px;

		.b-cell-b {
			width: auto;
			padding: 8px;

			.b-cell-name {
				width: 100px;
				margin-right: 10px;
				font-size: 13px;
				flex-shrink: 0;
				color: #777;
			}

			.b-cell-value {
				font-size: 13px;
				color: #333;
				white-space: pre-wrap;
				word-wrap: break-word;
			}

			.b-cell-foot {
				flex-shrink: 0;
				display: block;
				width: 15px;
				height: 15px;
				margin-left: 8px;
			}
		}
	}

	.f-item {
		padding: 3px 0;
		height: 25px;

		.f-img {
			position: block;
			width: 15px;
			height: 15px;
			padding: 0 1px;
			margin-right: 8px;
		}

		.f-name {
			color: #666;
			font-size: 12px;
			margin-right: 10px;
		}
	}
	.table{
		width: 100%;
		font-size: 13px !important;
	}
	
	.table td {
		vertical-align: middle;
		padding: 15px 10px;
		line-height: 20px;
		border: 1px solid #EEEEEE;
	}
	.table td.tdleft {
		text-align: center;
		background: #f6faff;
	}
	.table tr:hover {
		background: #f6faff;
	}
	.status-mark{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		margin-right: 2px;
	}
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		min-height: 40px !important;
		line-height: 40px !important;
		padding: 0 15px !important;
	}
</style>
